<template>
  <div class="input-header">
    <div class="input-box">
      <div class="radius-box">
        <i class="iconfont" :class="icon"></i>
        <input
          type="text"
          :placeholder="label"
          :value="searchContent"
          v-on="{ input: getSearchValue, focus: cancelShow }"
        />
        <i class="iconfont icon-quxiao" v-show="searchContent" @click="emptySearchContent"></i>
      </div>
      <div class="cancel" @click="click" v-if="isShow"><slot>取消</slot></div>
    </div>
  </div>
</template>

<script>
// 引入节流函数
import { VueDebounce } from '@/common/utils'
export default {
  name: 'HeadInput',
  props: {
    label: {
      type: String,
      default: '请输入搜索内容'
    },
    display: {
      type: Boolean,
      default: false
    },
    auto: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'icon-fangdajing'
    }
  },
  data() {
    return {
      searchContent: '',
      isShow: this.display
    }
  },
  methods: {
    SearchValue(e) {
      this.searchContent = e.target.value.trim()
      this.$emit('input', this.searchContent)
    },
    // 对频发事件进行防抖处理
    getSearchValue: VueDebounce('SearchValue', 200),
    emptySearchContent() {
      this.searchContent = ''
      this.$emit('input', this.searchContent)
    },
    click() {
      this.$emit('click')
      if (this.auto) this.isShow = false
    },
    cancelShow() {
      if (this.auto) this.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.input-header {
  height: 0.49rem;
  padding: 0.095rem 0.15rem;
  background-color: #fff;
  border-bottom: 0.5px solid #eee;
  .input-box {
    height: 100%;
    // background: #f4f4f4;
    display: flex;
    justify-content: space-between;
    .radius-box {
      height: 100%;
      display: flex;
      background: #f4f4f4;
      border-radius: 3px;
      overflow: hidden;
      flex: 1;
      i {
        font-size: 0.12rem;
        color: #c9c0ce;
        width: 0.26rem;
        text-align: center;
        line-height: 0.3rem;
      }
      input {
        height: 100%;
        outline: none;
        border: none;
        background: #f4f4f4;
        flex: 1;
      }
      input::-webkit-input-placeholder {
        color: #c9c0ce;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #c9c0ce;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #c9c0ce;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #c9c0ce;
      }
    }
  }
  .cancel {
    width: 0.43rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.icon-quxiao {
  color: #bdc0c5 !important;
}
</style>